<template>
  <div class="GuestPieceInfo">
    <headerimg>
      <template v-slot:img>
        <img src="/img/cus_banner.jpg" />
      </template>
    </headerimg>
    <div class="GuestPieceInfo-imgtitle">
      <imgtitle>
        <img src="/img/activity_title.jpg" />
      </imgtitle>
    </div>
    <target></target>
    <div class="GuestPieceInfo-content">
      <div class="GuestPieceInfo-content-title">
        <h1>三亚湾-夏日清风</h1>
        <h2>Time:2019-05-15 15:43:32 &nbsp;&nbsp;&nbsp;&nbsp; HOT:1952</h2>
      </div>
      <div class="GuestPieceInfo-content-container">
        <ul class="GuestPieceInfo-content-container-ul" v-if="ListInfo.length">
          <viewer class="GuestPieceInfo-content-container-div">
            <li
              class="GuestPieceInfo-content-container-li"
              v-for="(item) in ListInfo"
              :key="item.id"
            >
              <img :src="item.img" />
            </li>
          </viewer>
        </ul>
      </div>
      <div class="GuestPieceInfo-content-footer">
        <div class="GuestPieceInfo-content-footer-prev-next">
          <div class="prev" @click="prevClick">
            <img src="/img/prev-article.png" />
          </div>
          <div class="contnent" @click="homeClick">
            <img src="/img/home.png" />
          </div>
          <div class="next">
            <img src="/img/next-article.png" @click="nextClick" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import target from "../../components/conn/target";
import imgtitle from "../../components/conn/imgtitle";
import planting from "../../components/conn/planting";
import headerimg from "../conn/headerimg";
import { getUsercontentInfoListById } from "../../ajax/index";
export default {
  data() {
    return {
      id: 0,
      ListInfo: []
    };
  },
  created() {
    console.log(23123);
    this.id = this.$route.params.id;
    this.getListInfo();
  },
  methods: {
    getListInfo() {
      getUsercontentInfoListById({
        id: this.id
      })
        .then(result => {
          if (result.code) {
            this.ListInfo = result.data;
          }
        })
        .catch(err => {});
    },
    homeClick() {
      history.go(0);
    },
    prevClick() {
      if (!(this.id - 1)) {
        return;
      }
      this.id = this.id - 1;
      this.$router.push(`/home/guestpieceinfo/${this.id}`);
    },
    nextClick() {
      this.id = Number.parseInt(this.id) + 1;
      this.$router.push(`/home/guestpieceinfo/${this.id}`);
    }
  },
  components: {
    target,
    imgtitle,
    planting,
    headerimg
  },
  beforeUpdate() {
    this.getListInfo();
  }
};
</script>

<style lang='scss'>
.GuestPieceInfo {
  .GuestPieceInfo-imgtitle {
    margin: 80px auto;
  }
  .GuestPieceInfo-content {
    width: 1300px;
    margin: 0px auto;
    .GuestPieceInfo-content-title {
      h1 {
        border-bottom: solid 1px #cacacf;
        padding-bottom: 15px;
        text-align: center;
        width: 100%;
        font-size: 32px;
        font-weight: normal;
      }
      h2 {
        padding-top: 20px;
        color: #898989;
        background: none;
        text-align: center;
        width: 100%;
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 42px;
        padding-bottom: 42px;
      }
    }
    .GuestPieceInfo-content-container {
      width: 1300px;
      margin: auto;
      overflow: hidden;
      margin-top: 62px;
      .GuestPieceInfo-content-container-ul {
        .GuestPieceInfo-content-container-div {
          display: flex;
          margin: 60px auto;
          flex-wrap: wrap;
          .GuestPieceInfo-content-container-li {
            margin-right: 10px;
            margin-bottom: 40px;
          }
        }
      }
    }
    .GuestPieceInfo-content-footer {
      margin-bottom: 60px;
      .GuestPieceInfo-content-footer-prev-next {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .prev {
          img {
            transition: all 1s ease;
            &:hover {
              transform: rotate(360deg);
            }
          }
        }
        .contnent {
          img {
            transition: all 1s ease;
            &:hover {
              transform: rotate(360deg);
            }
          }
        }
        .next {
          img {
            transition: all 1s ease;
            &:hover {
              transform: rotate(360deg);
            }
          }
        }
      }
    }
  }
}
</style>